<template>
  <div id="DataMerger">
    <div class="dataMergerUp">
      <div class="itemUp">
        <div class="item">
          <div class="title">归集数据总量</div>
          <div class="nub">1916</div>
        </div>
        <div class="item">
          <div class="title">数据种类</div>
          <div class="nub">1916</div>
        </div>
      </div>
      <div class="itemDown">
        <div class="item">
          <div class="title">部门数量</div>
          <div class="nub">1916</div>
        </div>
        <div class="item">
          <div class="title">字段数量</div>
          <div class='nubBox'>
            <div class="nub">1916</div>
          </div>
        </div>
      </div>
    </div>
    <div class="dayaNumber" id="dayaNumber1" style="width: 560px; height: 288.57px"></div>
  </div>
</template>

<script  >
import * as echarts from "echarts";

export default {

  mounted() {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById("dayaNumber1"));
    var option;
    //绘制图标

    option = {
      title: {
        show: true,
        top:'3%',
        left:'4%',

            //主标题文本,'{a|}'表示使用rich中的b样式，我需要的样式是图片在前，文字在后
            //想要背景图在文字上的可以这么写：text: '{a|你的标题}'
            text: '{a|}'+' 数据量',
            //主标题文字样式
            textStyle: {
                color: '#fff',
                fontSize: 14,
                //自定义样式
                rich: {
                    "a": {
                        backgroundColor: {
                        	//在这里填写背景图片路径
                            image: require('@/assets/icon.png')
                        },
                        //设置图片宽高
                        height:15,
                        width:24,
                    }
                  }
            },
      },
      legend: {
        data: ["数据归集量", "数据治理量"],
        itemHeight: 3,
        itemWidth: 16,
        top: 20,
        right: 20,
        textStyle: {
          color: '#fff'
        }
      },

      xAxis: {
        show: true,
        type: "category",
        axisLabel: {
          interval: 0,
          show: true,
          textStyle: {
            color: '#fff'
          }
        },
        axisLine: {
          show: true,//是否显示轴线
          lineStyle: {
            color: '#1c2537',//刻度线的颜色
            width: 1
          }
        },
        data: [
          "1月",
          "2月",
          "3月",
          "4月",
          "5月",
          "6月",
          "7月",
          "八月",
          "九月",
          "10月",
          "11月",
          "12月",
        ],
      },
      yAxis:
      {
        type: "value",
        min: 0,
        max: 25,
        interval: 5,
        nameGap: 25,
        textStyle: {
          color: '#fff'
        },
        axisLabel: {

          show: true,
          textStyle: {
            color: '#fff'
          }
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: ['#1c2537'],

            width: 1,
            type: 'solid'
          }
        },
        axisLine: {
          show: true,//是否显示轴线
          lineStyle: {
            color: '#1c2537',//刻度线的颜色
            width: 1
          }
        },
      },
      series: [
        {
          name: "数据归集量",
          type: "bar",
          data: [0, 14, 0, 0, 20, 0, 0, 15, 0, 0, 0, 0],
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: "rgba(51, 118, 255, 1) " },
              { offset: 1, color: "rgba(204, 204, 204, 0)" },

            ]),
          },
        },
        {
          name: "数据治理量",
          type: "bar",
          data: [0, 18, 0, 0, 10, 0, 0, 13, 0, 0, 0, 0, 0],
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: "rgba(105, 255, 196, 1)" },
              { offset: 1, color: "rgba(204, 204, 204, 0) " },
            ]),
          },
        },
      ],
    };

    option && myChart.setOption(option);
  },
};
</script>
<style lang="less" scoped>
#DataMerger {
  // width: 585px;

  // height: 516px;
  // opacity: 0.9;
}

.dayaNumber {
  //   left: 25px;
  //   top: 353px;
  margin-top: 20px;
  // width: 585px;
  // height: 288.57px;
  opacity: 1;
  background: url("../../../state/DataMerger/bj.png");
  background-size: 100% 100%;
}

.dataMergerUp {
  width: 100%;
  min-height: 100px;

  .itemUp,
  .itemDown {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .item {
    height: 70px;
    margin-bottom: 16px;

    .title {
      font-size: 20px;
      font-weight: 400;
      line-height: 20px;
      color: rgba(255, 255, 255, 1);
      text-align: center;
      vertical-align: top;
      margin: 16px 0;
    }

    .nub {
      background: url("./../../../state/编组1.png");
      left: 341px;

      width: 269px;
      height: 36px;
      opacity: 1;
      background: linear-gradient(90deg,
          rgba(255, 255, 255, 0) 0%,
          rgba(120, 169, 255, 0.2) 51.39%,
          rgba(255, 255, 255, 0) 100%);
      font-size: 30px;
      line-height: 30px;
      text-align: center;
      vertical-align: top;
      // border-width: 1.4px 0px 1.4px 0px;
      // border-style: solid;
      border-color: rgba(255, 255, 255, 1);
    }
  }
}

.itemUp .nub {
  color: rgba(19, 182, 232, 1);
  font-weight: bold;
}

.itemDown .nub {
  color: rgba(105, 253, 195, 1);
  font-weight: bold;
}
</style>


  